<template>
    <div class="component-navbar">
        <nav v-for="(item,index) in nav" :key="index" class="component-navbar__list">
            <h3>{{ item.name }}</h3>
            <ul>
                <li
                    v-for="(childItem, childIndex) in item.children"
                    :key="childIndex"
                    :class="{ active: childItem.componentName=== currentName }"
                    @click="onJump(childItem)"
                >
                    {{ childItem.name }}
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>

export default {
    name: 'ComponentNavbar',

    props: {
        nav: {
            type: Array,
            default: () => [],
        },
    },

    data() {
        return {
            currentName: null,
        };
    },

    watch: {
        $route: {
            handler({ name }) {
                this.currentName = name;
            },
            immediate: true,
        },
    },

    methods: {
        onJump({ path }) {
            if (path === this.$route.path) return;
            this.$router.push({ path });
        },
    },
};
</script>

<style lang="scss">
.component-navbar {
    display: flex;

    width: 260px;
    height: 100%;

    text-align: left;

    background: #fff;

    flex-direction: column;

    &__list {
        padding: 5px 10px;
        ul {
            padding: 0;
            li {
                list-style: none;

                margin: 0;
                padding: 0;

                font-size: 14px;
                line-height: 40px;
                text-align: left;
                text-decoration: none;

                color: #999;

                cursor: pointer;

                span {
                    font-size: 14px;
                }

                &.active {
                    color: #409eff;
                }

                &:hover {
                    color: #000;
                    background-color: #f2f6fc;
                }
            }
        }
    }
}

</style>
